<template>
    <div class="query-bar">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-input
            v-model.number="queryId"
            placeholder="请输入ID"
            type="number"
            @keyup.enter.native="handleQuery"
          />
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const emit = defineEmits(['query']);
  const queryId = ref(null);
  
  const handleQuery = () => {
    if (queryId.value) {
      emit('query', queryId.value); // 传递ID参数
    } else {
      emit('query', null); // 清空查询
    }
  };
  </script>
  
  <style scoped>
  .query-bar {
    margin: 20px 0;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 8px;
  }
  </style>